<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 1150px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }
        #box li{
            width: 240px;
            height: 400px;
            float: left;
        }
        #box ul{
            width: 1300px;
            list-style: none;
        }
    </style>
</head>
<body>
<div id="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
</div>
<script>
    function getStyle(element,attr){
        return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
        //获取任意元素属性的值,返回的是字符串,第二个参数是伪类,没有填得是Null
        //window.getComputedStyle(element,null)[attr]--谷歌火狐,因为attr是字符串参数所以用[]。
        //element.currentStyle[attr] --火狐
    }
    //多个变速效果。
    function shiftAnimat(element,json,fn) {  //传入多个属性的json对象{width:100,top:20}，fn为回调函数
        clearInterval(element.iditem);      //先清除定时器
        element.iditem = setInterval(function(){    //定时函数
            var flag = true;
            for(var attr in json){                          //循环json对象,可以拿到多个属性的值
                if(attr == "opacity"){
                    var current = getStyle(element,attr)*100;      //当前的距离,放大100
                    var target = json[attr]*100;                    //目标距离,放大100
                    var step = (target - current)/10;               //每次的步数
                    step = step>0?Math.ceil(step):Math.floor(step); //变速，不匀速取整
                    current+=step;                                  //移动后的值
                    element.style[attr] = current/100;             //把移动的值赋给对象
                }else if(attr =="zIndex"){
                    element.style[attr] = json[attr];
                }else{
                    var current = parseInt(getStyle(element,attr)); //当前的距离,
                    var target = json[attr];                        //目标距离
                    var step = (target - current)/10;               //每次的步数
                    step = step>0?Math.ceil(step):Math.floor(step); //变速，不匀速取整
                    current+=step;                                  //移动后的值
                    element.style[attr] = current+"px";             //把移动的值赋给对象
                }
                if(current != target){                          //如果某个距离没走完,flag=false,继续循环定时器
                    flag = false;
                }
            }
            if(flag){                                           //直到所有距离都走完了,false=true,清理定时器。
                clearInterval(element.iditem);                  //清除定时器
                if(fn){                                         //回调函数，如果有这个参数的话执行,代表这些一个动画继续再执行,再执行。
                    fn();
                }
            }
            console.log("目标："+target+",当前:"+current +",步数："+ step +"")
        },20)

    }


    var list = document.getElementsByTagName("li");
    for(var i=0;i<list.length;i++){                 //循环li给每个li加背景图片
        list[i].style.backgroundImage = "url(images/"+(i+1)+".jpg)";
        list[i].onmouseover = mouseoverHandle;      //给每个li加事件
        //鼠标离开
        list[i].onmouseout = mouseoutHandle;
    }
    function mouseoverHandle() {                    //不能使用mouseoverHandle = function
        for(var j=0;j<list.length;j++){             //鼠标放上所有图片宽度都100，当前放上的800宽
            shiftAnimat(list[j],{"width":100});
        }
        shiftAnimat(this,{"width":800})
    }
    function mouseoutHandle(){
        for(var j=0;j<list.length;j++) {
            shiftAnimat(list[j], {"width": 240});    //鼠标离开都变成240宽
        }
    }




</script>

</body>
</html>